<template>
  <section>
    <!-- 图片预览 -->
    <el-dialog v-model="props.modelValue" width="1600px" @close="hideImage" append-to-body>
      <template #header>
        <div class="text-white text-center font-bold text-[18px]">更多</div>
      </template>
      <!-- 按钮列表 -->
      <ul class="mb-4">
        <li v-for="(item, index) in state.buttonList" :key="index">
          <button
            class="mr-[10px] py-1 px-6 bg-white text-purple-900 shadow-lg shadow-purple-900/50 text-[14px] rounded-[4px]"
            @click="setButtonIndex(index)">
            {{ item }}
          </button>
        </li>
      </ul>
      <ul class="h-[600px] overflow-y-auto text-gray scrollbar">
        <!-- 图片视图 -->
        <li v-if="state.buttonIndex === 0">
          <div class="flex justify-start">
            <div class="w-[300px]">
              <el-input v-model="state.imageListStr" placeholder="请图片字符串" @change="handleImageListStr" />
            </div>
            <button
              class="mx-[10px] py-2 px-6 text-white bg-purple-500 shadow-lg shadow-purple-900/50 text-[12px] rounded-md"
              @click="clearImageList">
              清除图片
            </button>
          </div>
          <ul class="flex flex-wrap">
            <li class="relative" v-for="(item, index) in state.imageList" :key="item" @click="props.copyStr(item)">
              <img class="w-[150px] m-5 object-contain" :src="item" />
              <div
                class="absolute top-[5px] rounded-[20px] bg-orange-600 text-white flex justify-center items-center p-[3px]">
                <p class="w-[20px] h-[20px] text-center">
                  {{ index + 1 }}
                </p>
              </div>
            </li>
          </ul>
        </li>
      </ul>
      <template #footer>
        <div class="dialog-footer">
          <button
            class="mx-[10px] py-2 px-6 text-white bg-purple-500 shadow-lg shadow-purple-900/50 text-[12px] rounded-md"
            @click="hideImage">
            关闭
          </button>
        </div>
      </template>
    </el-dialog>
  </section>
</template>

<script lang="ts" setup>
type Props = {
  modelValue: boolean; // 组件 v-model 传值       默认属性名 modalValue
  copyStr: Function;
};
// 默认值赋值
const props = withDefaults(defineProps<Props>(), {});
const emit = defineEmits(["update:modelValue"]);
const state = reactive({
  imageListStr: "",
  imageList: [],
  buttonList: ["图片预览"],
  buttonIndex: 0,
});

const hideMoreModal = (bool: boolean) => {
  emit("update:modelValue", bool);
};
const setButtonIndex = (index: number) => {
  state.buttonIndex = index;
};
const hideImage = () => {
  hideMoreModal(false);
  state.buttonIndex = 0;
  // 清除其他值
  clearImageList();
};
const clearImageList = () => {
  state.imageList = [];
  state.imageListStr = "";
};
const handleImageListStr = () => {
  const { imageListStr } = state;
  const list = imageListStr.match(/(http)[a-zA-Z0-9\-\:\/\.\_]+(.png|.jpeg|.jpg)/g) || [];
  state.imageList = list as any;
  state.imageListStr = "";
};
</script>
<style lang="scss" scoped></style>
